import * as echarts from 'echarts'
export const setOption = function (title: string, color: string, xData: number[] | undefined, yData: number[], min: number, max: number,xl?:string,yl?:string) {
    let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: 'rgb(126,199,255)',
                },
            },
        },
        legend: {
            show: true,
            top: "1%",
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        grid: {
            top: '40',
            left: '45',
            right: '42',
            bottom: '25',
        },
        xAxis: [
            {
                name: xl,
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                name: yl,
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    padding: [0, 60, 0, 0]
                },
                min,
                max,
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: title,
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color, // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color,//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: window.innerWidth > 1200, // 根据屏幕宽度决定是否显示数值
                            color: '#fff',
                            position: 'top', // 在上方显示
                            formatter: function (res: any) {
                                if (res.value !== undefined && res.value !== null) {
                                    return res.value.toFixed(2); // 保留两位小数，根据实际数据类型调整
                                } else {
                                    return ''; // 没有数据时显示空字符串
                                }
                            },
                            fontSize: window.innerWidth > 1400 ? 12 : 10, // 根据屏幕大小调整字体
                            distance: 5, // 调整标签与点的距离
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是'true'，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#00ffa230',
                                },
                                {
                                    offset: 0.6,
                                    color: '#00ffa220',
                                },
                                {
                                    offset: 1,
                                    color: '#00ffa210',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: yData
            }
        ]
    }
    return option
}

export const Adminanayle = (timeData: any, selectParmas: any, xData: any, yData: any, time: any = "时间段",gatewayName: any,deviceName: any) => {
    const moduleList = {
        uvc: {
            color: "#9b59b6",
            name: "紫外"
        },
        tem: {
            color: "#e74c3c",
            name: "温度"
        },
        inf: {
            color: "pink",
            name: "红外"
        },
        hum: {
            color: "#3498db",
            name: "湿度"
        },
        pre: {
            color: "#f1c40f",
            name: "压力"
        }
    }
    // @ts-ignore
    let title = selectParmas ? gatewayName + "-" + (deviceName || `监测点${selectParmas[1]}`) + "-" + (moduleList[selectParmas[2]].name) : "实例趋势"

    //@ts-ignore
    let color = selectParmas ? (moduleList[selectParmas[2]].color) : "pink"
    let option = {
        legend: {
            top: '4%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: "red"
                },
            }
        },
        toolbox: {
            show: true,
            feature: {
                restore: { show: true, title: "刷新视图" },
                saveAsImage: {
                    show: true,
                    pixelRatio: 1,
                    title: "保存图片",
                    type: "png",
                    lang: ["点击保存"]
                }
            }
        },
        xAxis: {
            type: 'category',
            data: timeData
        },
        yAxis: {
            type: 'value',
            min: 0, // 确保Y轴从0开始
            axisLabel: {
                formatter: function (value: number) {
                    return value === 0 ? '0' : value; // 确保0值显示为'0'
                },
                margin: 10 // 调整标签与轴线的距离
            }
        },
        dataZoom: [
            {
                type: 'inside',
                show: true,
                // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
                start: 0,
                // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                end: 100,
                zoomOnMouseWheel: true,
                // 第一个 dataZoom 组件
                xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
            },

        ],
        series: [
            {
                name: title,
                type: 'line',
                lineStyle: {
                    color // 设置第一条折线颜色
                },
                data: xData,
                progressive: 2000, // 渐进式渲染
                large: true,       // 启用大数据优化
                largeThreshold: 2000 // 超过2000点自动优化
            },
            // //折线图流光配置（大数据建议注释掉）
            // {
            //     name: time,
            //     type: 'lines',
            //     coordinateSystem: 'cartesian2d',
            //     polyline: true,
            //     effect: {
            //         show: true,//是否展示
            //         period: 10,//时间
            //         trailLength: 0.1,//尾部长度
            //         symbolSize: 12,//点大小
            //         symbol: 'circle',//点的类型
            //         color,//颜色
            //     },
            //     data: [{
            //         //coords:[['x轴数据'，y轴数据]] 一一对应拼接
            //         coords: yData
            //     }]
            // }
        ]
    };
    return option
}

// 系统信息饼图
export const systemInfoPie = function (value) {
    let option = {
        backgroundColor: 'transparent',
        title: {
            text: '{a|' + value + '%' + '}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 20,
                        color: '#7DB2FF',
                        padding: 5,
                    }
                },
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['72%', '62%'],
                silent: true,
                clockwise: true,
                label: {
                    normal: {
                        position: 'center',
                    },
                },
                data: [
                    {
                        value: value,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: {
                                    colorStops: [
                                        {
                offset: 0,
                color: '#ebeef5', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#35a542', // 100% 处的颜色
            },
            ],
        },
            },
        },
    },
    {
        value: 100 - value,
        name: '',
        label: {
            normal: {
                show: false,
            },
        },
        itemStyle: {
            normal: {
                color: {
                    colorStops: [
                        {
                            offset: 0,
                            color: '#ebeef5', // 0% 处的颜色
                        },
                        {
                            offset: 0.3,
                            color: '#ebeef5', // 0% 处的颜色
                        },
                        {
                            offset: 0.6,
                            color: '#ebeef5', // 100% 处的颜色
                        },
                    ],
                },
            },
        },
    },
                ],
            },
        ],
    };
    

    return option
}

// 主界面的报警分类饼图
export const alarmPieOption = function() {
    let option = {
        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9'],
        title: {
           text: '',
           textStyle: {
              fontSize: 14,
           },
           top: '20px', // 设置标题位于图表的顶部
        },
        tooltip: {
           trigger: 'item',
        },
           series:[
              {
                 type: 'pie',
                 radius: [44, 86],
                 center: ['50%', '50%'],
                 roseType: 'area',
                 data: [
                     { value: 32, name: '温度告警' },
                     { value: 40, name: '紫外告警' },
                     { value: 38, name: '红外告警' },
                     { value: 28, name: '压力告警' },
                    { value: 30, name: '湿度告警' },
                 ]
              }
           ],
         label: {
           show: true,
           position: 'outside'     
        }
     }
     return option
  }
  
  // 报警的柱状图
  export const columAlarmOption  = () => {
        let option = {
           backgroundColor: 'transparent',
           tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(52, 57, 67, 0.9)",
              borderColor: "rgba(52, 57, 67)", //设置边框颜色
              axisPointer: {
                 type: "shadow",
              },
              textStyle: {
                 color: "#fff",
                 fontSize: 14,
              },
           },
           grid: {
              top: 50,
              left: 60,
              right: 30,
              bottom: 100,
           },
           xAxis: {
              type: "category",
              data: ["2024-1-16","2024-1-17","2024-1-18"],
              color: "#64e7ff",
              axisLabel: {
                 show: true,
                 textStyle: {
                    color: "#000",
                    fontSize: 15,
                 },
              },
           },
           yAxis: {
              name: "单位",
              nameTextStyle: {
                 color: "#fff",
                 fontSize: 15,
              },
              type: "value",
              axisLabel: {
                 show: true,
                 textStyle: {
                    color: "#fff",
                    fontSize: 14,
                 },
                 formatter: function (value) {
                    var txt = [];
                    if (value >= 1000) {
                       txt.push(value / 10000 + "万");
                    } else {
                       txt.push(value);
                    }
                    return txt;
                 },
              },
           },
           series: [
              {
                 itemStyle: {
                    color: "#64e7ff",
                 },
                 label: {
                    normal: {
                       show: true, //是否显示
                       position: "top", //文字位置
                       formatter: "{c}", //c后面加单位
                       color: "#ffffff",
                       fontSize: 14,
                    },
                 },
                 barWidth: 20,
                 data: [2036, 8113, 3591],
                 type: "bar",
              }
           ]
        }
        return option
  }

  // 历史数据统计
export const historyTotal = () => {
    return {
        grid: {
            bottom: 10
        },
        title: {
            text: '',
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            bottom: '0',
            left: 'center',
            data: ['紫外', '湿度', '压力', '红外', '温度'],
            textStyle: {
                color: "#fff"
            }
        },
        color: ['#5470c6', '#91cc75', '#facc14', '#ee6666', '#73c0de'],
        series: [
            {
                name: '报警统计',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 20, name: '紫外' },
                    { value: 15, name: '湿度' },
                    { value: 10, name: '压力' },
                    { value: 30, name: '红外' },
                    { value: 25, name: '温度' }
                ]
            }
        ]
    };
}

export const historyNum = (title:string = '点击扇区，查看信息',color:string="#5672c4",xData:Array<string> = ['2024-2-17', '2024-2-18','2024-2-19','2024-4-18'],data:Array<number> = [90,70,98,40]) => {
    let option = {
        title: {
            text: '报警统计',
            textStyle: {
              color: "#fff",
              fontSize: "16px"
            }
          },
         backgroundColor: 'rgba(0,0,0,0)',
         grid: {
           top: '15%',
           left: '5%',
           right: '5%',
           bottom: '20',
           containLabel: true,
         },
          legend: {
             icon:'circle',
             right: '4%',
             top:'1%',
             show: true,
             itemWidth: 10,
             itemHeight: 10,
             itemGap: 28,
             textStyle: {
               color: '#fff',
               fontSize: 12,
             },
                 },
         tooltip: {
           trigger: "axis",
           
         },
         xAxis: {
           data:xData,
           axisLine: {
             show: true,
             lineStyle: {
               color: '#44c2f4',
             }
           },
           axisLabel: {
             color: '#fff',
             fontSize: 12,
           },
         },
         yAxis: [{
           type: 'value',
           nameTextStyle: {
             color: "#fff",
             fontSize: 18,
             padding: [0, 0,  0, 30]
           },
           axisLabel: {
             color: '#fff',
             fontSize: 12
           },
           splitLine: {     //网格线
                 "show": false,
               }
         }],
         series: [
           {
             name: title,
             type: 'bar',
             barWidth: 18,
             label: {
                 show: true,
                 color: "#fff"
             },
             data,
             itemStyle: {
               normal: {
                 color
               },
             },
           }
         ]
       }      
       return option
}